<!-- 游戏编辑弹窗 -->
<template>
  <el-drawer :title="isUpdate ? '配置游戏启动参数' : '配置游戏启动参数'" :visible="visible" :size="'calc(100vw - 256px)'"
             :destroy-on-close="true" :lock-scroll="false" :before-close="confirmClose" @update:visible="updateVisible"
             :direction="direction" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px" style="margin: 10px 30px">
      <!--      <el-row :gutter="15">-->
      <el-col :sm="12">
        <el-form-item label="移动端启动方式:" prop="open_type">
          <el-radio-group v-model="form.open_type">
<!--            <el-radio :label="0">原生启动</el-radio>-->
            <el-radio :label="1">外部启动</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 安卓配置 -->
        <el-form-item label="安卓安装包名称:" prop="android_package_name">
          <el-input v-model="form.android_package_name" placeholder="请输入安卓安装包名称" clearable />
        </el-form-item>
        <el-form-item label="安卓启动包名:" prop="android_bag">
          <el-input v-model="form.android_bag" placeholder="请输入安卓安卓启动包名" clearable />
        </el-form-item>
        <el-form-item label="安卓下载地址:" prop="android_download_url">
          <el-input v-model="form.android_download_url" placeholder="请输入安卓下载地址" clearable />
        </el-form-item>

        <el-form-item label="IOS下载地址:" prop="ios_download_url">
          <el-input v-model="form.ios_download_url" placeholder="请输入IOS下载地址" clearable />
        </el-form-item>

        <!-- IOS配置 -->
        <el-form-item label="IOS启动URLScheme:" prop="ios_bag">
          <el-input v-model="form.ios_bag" placeholder="请输入IOS启动URLScheme" clearable />
        </el-form-item>

        <el-form-item>
          <el-button @click="confirmClose()">取消</el-button>
          <el-button type="primary" @click="save" :loading="loading">保存</el-button>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <!-- IOS端参数 -->
        <el-form-item label="ios参数 : ">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addIosNewItem">添加IOS端参数</el-button>
          <el-table :data="iosAttrTable" border style="width: 100%">
            <el-table-column label="参数名">
              <template slot-scope="scope">
                <el-input v-model="scope.row.item"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="参数值">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column width="100px" label="操作">
              <template slot-scope="scope">
                <i class="el-icon-delete" @click="delIosAttr(scope.$index)" style="cursor: pointer"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <!-- 安卓端参数 -->
        <el-form-item label="android参数 : ">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addAndroidNewItem">添加安卓端参数</el-button>
          <el-table :data="androidAttrTable" border style="width: 100%">
            <el-table-column label="参数名">
              <template slot-scope="scope">
                <el-input v-model="scope.row.item"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="参数值">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column width="100px" label="操作">
              <template slot-scope="scope">
                <i class="el-icon-delete" @click="delAndroidAttr(scope.$index)" style="cursor: pointer"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-col>
      <!--      </el-row>-->
    </el-form>
  </el-drawer>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css"

export default {
  name: "BoxGameStartEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  components: { },

  data() {
    return {
      direction: "rtl",
      // 表单数据
      form: Object.assign({ status: 1 }, this.data),
      where: {},
      // 表单验证规则
      rules: {
      },
      iosAttrTable: [],
      androidAttrTable: [],
      pcAttrTable: [],
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      disabled: {
        type: Boolean,
        default: false,
      },
    };
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
      // console.log(this.myValue);
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    },
    visible(val) {
      this.iosAttrTable = [];
      this.androidAttrTable = [];
      if (val) {
        if (this.data) {
          this.form = Object.assign({}, this.data);
          if (this.form.ios_param) {
            this.iosAttrTable = JSON.parse(this.data.ios_param);
          }
          if (this.form.android_param) {
            this.androidAttrTable = JSON.parse(this.data.android_param);
          }
          this.isUpdate = true;
        } else {
          this.form = {};
          this.isUpdate = false;
        }
      }
    }
  },
  computed: {
  },
  methods: {
    save() {
      this.form.ios_param = JSON.stringify(this.iosAttrTable);
      this.form.android_param = JSON.stringify(this.androidAttrTable);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http
            .post("/boxGame/edit", this.form)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },

    // 删除规格
    delAndroidAttr(index) {
      this.androidAttrTable.splice(index, 1);
    },

    // 删除规格
    delIosAttr(index) {
      this.iosAttrTable.splice(index, 1);
    },

    // 添加信息规格
    addIosNewItem() {
      this.iosAttrTable.push({ item: "", value: "" });
    },

    addAndroidNewItem() {
      this.androidAttrTable.push({ item: "", value: "" });
    },

    confirmClose() {
      this.$confirm("确定要返回吗？", "温馨提示")
        .then(() => {
          this.updateVisible(false);
          this.initForm();
        })
        .catch(() => { });
    },


  }
};
</script>

<style scoped></style>
